<template>
  <transition name="viewer-fade">
    <div class="wrapper ub" style="{ 'z-index': zIndex }">
      <div class="ub-f1 viewerWrapper">
        <div class="canvas ub ub-ac ub-pc">
          <img v-if="current.type == 'img'" class="img" :src="current.url" :style="imgStyle" referrerpolicy='no-referrer'
            @mousedown="handleMouseDown">
          <video v-else-if="current.type == 'video'" class="video" width="100%" height="100%" controls>
            <source :src="current.url">
          </video>
          <audio v-else-if="current.type == 'audio'" class="audio" controls>
            <source :src="current.url">
          </audio>
          <template v-if="!isSingle">
            <div class="prevButton" @click="prev">
              <i class="el-icon-arrow-left" />
            </div>
            <div class="nextButton" @click="next">
              <i class="el-icon-arrow-right" />
            </div>
          </template>
          <div class="actions ub ub-ac ub-pc" v-if="current.type == 'img'">
            <i class="el-icon-zoom-out" @click="handleActions('zoomOut')"></i>
            <i class="el-icon-zoom-in" @click="handleActions('zoomIn')"></i>
            <i :class="mode.icon" @click="toggleMode"></i>
            <i class="el-icon-refresh-left" @click="handleActions('anticlocelise')"></i>
            <i class="el-icon-refresh-right" @click="handleActions('clocelise')"></i>
          </div>
          <i class="el-icon-close closeIcon" @click="beforeClose"></i>
        </div>
        <div class="listWrapper" ref="listWrapper">
          <div class="list ub ub-wrap" :style="{ width: listWidth, left: listLeft + 'px' }">
            <div class="li" v-for="item in imgList" :key="item.id" :class="{ active: current.id == item.id }"
              @click="setIndex(item)">
              <el-image class="image" :src="item.cover" fit="fill" :lazy="false"></el-image>
            </div>
          </div>
          <div class="listPrev" @click="scrollLeft">
            <i class="el-icon-arrow-left" />
          </div>
          <div class="listNext" @click="scrollRight">
            <i class="el-icon-arrow-right" />
          </div>
        </div>
      </div>
      <div class="info">
        <div class="row ub">
          <div class="label">项目名称:</div>
          <div class="value ub-f1" :title="current.name">{{ current.name }}</div>
        </div>
        <div class="row ub">
          <div class="label">照片来源:</div>
          <div class="value ub-f1" :title="current.name">
            <el-link type="info" class="link" :underline="true" @click="openRecord">查看隐患记录</el-link>
          </div>
        </div>
        <div class="row ub">
          <div class="label">隐患性质:</div>
          <div class="value ub-f1" :title="current.name">一般隐患</div>
        </div>
        <div class="row ub">
          <div class="label">安全区域:</div>
          <div class="value ub-f1" :title="current.name">一工区</div>
        </div>
        <div class="row ub">
          <div class="label">清单分类:</div>
          <div class="value ub-f1" :title="current.name">未分类</div>
        </div>
        <div class="row ub">
          <div class="label">上传人员:</div>
          <div class="value ub-f1" :title="current.name">张津</div>
        </div>
        <div class="row ub">
          <div class="label">上传时间:</div>
          <div class="value ub-f1" :title="current.name" style="line-height: 25px;">2024-02-01 10:27:30</div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import { PopupManager } from 'element-ui/src/utils/popup';
import { rafThrottle } from 'element-ui/src/utils/util';
import { on, off } from 'element-ui/src/utils/dom';
const Mode = {
  CONTAIN: {
    name: 'contain',
    icon: 'el-icon-full-screen'
  },
  ORIGINAL: {
    name: 'original',
    icon: 'el-icon-c-scale-to-original'
  }
};
export default {
  name: "ZjViewer",
  props: {
    visible: Boolean,
    imgList: {
      type: Array,
      default: () => []
    },
    selectItem: {
      type: Object,
      default: () => { }
    }
  },
  mounted() {
    this.index = this.selectItem.index;
    this.listElWidth = this.$refs.listWrapper.clientWidth - 80;
  },
  computed: {
    isSingle() {
      return this.imgList.length == 1;
    },
    current() {
      return this.imgList[this.index];
    },
    listWidth() {
      let width = this.imgList.length * 110
      return width < 500 ? "100%" : (width + "px");
    },
    imgStyle() {
      const { scale, deg, offsetX, offsetY, enableTransition } = this.transform;
      const style = {
        transform: `scale(${scale}) rotate(${deg}deg)`,
        transition: enableTransition ? 'transform .3s' : '',
        'margin-left': `${offsetX}px`,
        'margin-top': `${offsetY}px`
      };
      if (this.mode === Mode.CONTAIN) {
        style.maxWidth = style.maxHeight = '100%';
      }
      return style;
    }
  },
  data() {
    return {
      zIndex: PopupManager.nextZIndex(),
      index: 0,
      loading: false,
      mode: Mode.CONTAIN,
      transform: {
        scale: 1,
        deg: 0,
        offsetX: 0,
        offsetY: 0,
        enableTransition: false
      },
      listElWidth: 0,
      listLeft: 0,
    }
  },
  methods: {
    handleMouseDown(e) {
      const { offsetX, offsetY } = this.transform;
      const startX = e.pageX;
      const startY = e.pageY;
      this._dragHandler = rafThrottle(ev => {
        this.transform.offsetX = offsetX + ev.pageX - startX;
        this.transform.offsetY = offsetY + ev.pageY - startY;
      });
      on(document, 'mousemove', this._dragHandler);
      on(document, 'mouseup', ev => {
        off(document, 'mousemove', this._dragHandler);
      });
      e.preventDefault();
    },
    resetListLeft() {
      const max = this.imgList.length * 110 - this.listElWidth;
      console.log(this.index, max, this.listLeft)
      if (this.listLeft <= (this.index + 1) * -110) {
        this.listLeft = this.index * -110
      }
      if ((this.index + 1) * -110 <= this.listLeft - this.listElWidth) {
        this.listLeft = (this.index + 1) * -110 + this.listElWidth
      }
    },
    prev() {
      this.reset()
      const len = this.imgList.length;
      this.index = (this.index - 1 + len) % len;
      this.resetListLeft();
    },
    next() {
      this.reset()
      const len = this.imgList.length;
      this.index = (this.index + 1) % len;
      this.resetListLeft();
    },
    setIndex(item) {
      const index = this.imgList.findIndex(img => img.id === item.id)
      this.index = index
    },
    handleActions(action, options = {}) {
      const { zoomRate, rotateDeg, enableTransition } = {
        zoomRate: 0.2,
        rotateDeg: 90,
        enableTransition: true,
        ...options
      };
      const { transform } = this;
      switch (action) {
        case 'zoomOut':
          if (transform.scale > 0.2) {
            transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3));
          }
          break;
        case 'zoomIn':
          transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3));
          break;
        case 'clocelise':
          transform.deg += rotateDeg;
          break;
        case 'anticlocelise':
          transform.deg -= rotateDeg;
          break;
      }
      transform.enableTransition = enableTransition;
    },
    reset() {
      this.transform = {
        scale: 1,
        deg: 0,
        offsetX: 0,
        offsetY: 0,
        enableTransition: false
      };
    },
    toggleMode() {
      const modeNames = Object.keys(Mode);
      const modeValues = Object.values(Mode);
      const index = modeValues.indexOf(this.mode);
      const nextIndex = (index + 1) % modeNames.length;
      this.mode = Mode[modeNames[nextIndex]];
      this.reset();
    },
    beforeClose() {
      this.$emit('update:visible', false);
    },
    openRecord() {
      console.log(this.current.id)
    },
    scrollLeft() {
      if (this.listLeft < 0) {
        this.listLeft += 110;
      }
      if (this.listLeft > 0) {
        this.listLeft = 0;
      }
    },
    scrollRight() {
      this.listLeft -= 110;
      const max = this.imgList.length * 110 - this.listElWidth;
      if (this.listLeft < -max) {
        this.listLeft = -max;
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.wrapper {
  position: fixed;
  top: 85px;
  left: 230px;
  bottom: 0px;
  right: 0px;
  background: #000000;
  overflow: hidden;

  * {
    position: relative;
  }

  .viewerWrapper {
    .canvas {
      height: calc(100% - 150px);

      .img,
      .video,
      .audio {
        display: block;
      }

      .actions {
        position: absolute;
        bottom: 5px;
        width: 300px;
        margin-left: -150px;
        left: 50%;
        background: rgba(0, 0, 0, .5);
        height: 40px;
        border-radius: 20px;

        i {
          color: #ffffff;
          display: block;
          font-size: 22px;
          margin-right: 10px;
          cursor: pointer;
        }
      }

      .prevButton {
        cursor: pointer;
        position: absolute;
        left: 10px;
        color: #ffffff;
        font-size: 22px;
        cursor: pointer;
        padding: 5px;

        &:hover {
          color: #409EFF;
        }
      }

      .nextButton {
        cursor: pointer;
        position: absolute;
        right: 10px;
        color: #ffffff;
        font-size: 22px;
        cursor: pointer;
        padding: 5px;

        &:hover {
          color: #409EFF;
        }
      }

      .closeIcon {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 22px;
        color: #fff;
        cursor: pointer;
        padding: 5px;

        &:hover {
          color: #409EFF;
        }
      }
    }

    .listWrapper {
      // overflow-y: hidden;
      // overflow-x: auto;
      overflow: hidden;
      height: 150px;
      padding: 0px 40px;

      .listPrev {
        width: 40px;
        background: #313131;
        height: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        font-size: 22px;
        color: #ffffff;
        text-align: center;
        line-height: 150px;
        cursor: pointer;

        &:hover {
          background: #444444;
          color: #409EFF;
        }
      }

      .listNext {
        width: 40px;
        background: #313131;
        height: 100%;
        position: absolute;
        right: 0px;
        top: 0px;
        font-size: 22px;
        color: #ffffff;
        text-align: center;
        line-height: 150px;
        cursor: pointer;

        &:hover {
          background: #444444;
          color: #409EFF;
        }
      }
    }

    .list {
      background: #191919;
      height: 150px;

      .li {
        width: 100px;
        height: 140px;
        margin: 5px;
        cursor: pointer;

        &.active {
          border: 1px solid #409EFF;
        }

        .image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .info {
    padding: 50px 20px;
    width: 300px;
    background: #191919;
    color: #ffffff;
    font-size: 16px;

    .row {
      margin-bottom: 10px;

      .label {
        width: 100px;
        margin-right: 5px;
      }

      .value {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        .link {
          font-size: 16px;
          color: #409EFF;
        }
      }
    }
  }
}
</style>